<html>
<head>
    <title>Tree Commons</title>
    <meta name="description" content="Tree Commons Editor">
    
    <link rel="stylesheet" href="/static/css/main.css" /> 
    <script language="javascript">
        function init(){
            var elem = document.getElementById("tree-canvas");
            
            var context = elem.getContext("2d");
            
            context.fillStyle = "rgba(22,22,22,0.05)";
            context.fillRect(0, 0, elem.width, elem.height);
            
            var pos = 0, dir = 1;
            
        };
    </script>
</head>
<body onload="init()">
<div id="wrapper">
    <div id="header">
        <div id="title">Tree Commons Editor</div>
        <div id="version">1-0</div>
    </div>
    <div id="content">
        <div id="taxalist">
        <div id="title">Leaf Nodes</div><br />
        <ul class="nodes">
        {% for node in nodelist.leafs %}
            <li style="color: {{node.branch_color}};">
            {% if node.name_txt %}
            <div class="node">{{ node.name_txt }} <span class="inline-sub"> {{ node.gpe_node_id }}</span></div>
            {% else %}
            <div class="node"> {{ node.gpe_node_id }}</div>
            {% endif %}
            </li>
        {% endfor %}
        </ul>
        <div id="title">HTU Nodes</div><br />
        <ul class="nodes">
        {% for node in nodelist.htus %}
            <li style="color: {{node.branch_color}};">
            {% if node.name_txt %}
            <div class="node">{{ node.name_txt }} <span class="inline-sub"> {{ node.gpe_node_id }}</span></div>
            {% else %}
            <div class="node"> {{ node.gpe_node_id }}</div>
            {% endif %}
            </li>
        {% endfor %}
        </ul>
        </div>
        <div id="tree">
            <canvas id="tree-canvas"></canvas>
            <div class="tools">
                tooltips
            </div>
            <div class="extended">
                Highlighed Node
            </div>
        </div>
        <div id="options">
            <div class="option">Save Tree</div>
            <div class="option">Output Image</div>
            <div class="option">Generate Widget</div>
            <div class="option">Generate GeoPhylo</div>
        </div>
    </div>
</div>
</body>
</html>
